<template>
  <div class="bubble-wrapper" v-show="num>0">
    <span class="bubble">
    {{num}}
  </span>
  </div>
</template>

<script>
  export default {
    name: 'bubble',
    props: {
      num: {
        type: Number,
        default: 0
      }
    }
    // computed: {
    //   totalNum() {
    //     return this.$store.getters.getAllFoodsCount.count
    //   }
    // },    
  }
</script>

<style lang="stylus" scoped>
  @import "~common/stylus/variable"
  .bubble-wrapper
    display: table
    height: 16px
    background-color: $color-red
    border-radius: 8px
    padding: 0 5px
    .bubble
      display: table-cell
      vertical-align: middle  
      // font-size: $fontsize-small-s
      font-size: 12px
      font-weight: 700
      line-height: 16px
      text-align: center
      color: $color-white 
</style>
